<template>
  <v-page
    v-model="refreshing"
    background="#f5f6fa"
    header-background="white"
    padding-top="24rpx"
    @refresh="refreshHandle"
  >
    <template #header>
      <v-navbar
        title="协商历史"
        native
      />
    </template>
    <template #default>
      <view
        v-for="(log, index) in logs"
        :key="index"
        class="aftersales-block"
      >
        <view class="header">
          <view
            v-if="log.type === 'BUYER'"
            class="text-icon buyer"
          >
            买
          </view>
          <view
            v-else
            class="text-icon merchant"
          >
            商
          </view>
          <view class="header-content">
            <view class="main">
              {{ log.title }}
            </view>
            <view class="sub">
              {{ formateDateTime(log.create_time) }}
            </view>
          </view>
        </view>
        <view
          v-for="(item, itemIndex) in log.content_info"
          :key="itemIndex"
          class="info-item"
        >
          <template v-if="['申请凭证', '上传凭证'].includes(item.title)">
            <view class="image-list">
              <v-image
                v-for="(img, imgIndex) in imagesParse(item.content)"
                :key="imgIndex"
                height="150rpx"
                width="150rpx"
                border-radius="8rpx"
                :src="img"
                mode="aspectFill"
                preview
              />
            </view>
          </template>
          <template v-else>
            <view class="label">
              {{ `${item.title}:` }}
            </view>
            <view class="content">
              {{ item.content }}
            </view>
          </template>
        </view>
      </view>
    </template>
  </v-page>
</template>

<script setup lang="ts">
import { formateDateTime } from '@/utils/formater';

const aftersalesId = ref('');
const loading = ref(true);
onLoad(async (query) => {
  aftersalesId.value = query?.id as string;
  loading.value = true;
  await getLogs();
  loading.value = false;
  if (!logs.value) uni.navigateBack();
});

const refreshing = ref(false);
const refreshHandle = async () => {
  refreshing.value = true;
  await getLogs();
  refreshing.value = false;
};

const logs = ref<BackRefundLogVO[]>();
const getLogs = async () => {
  const response = await $api.getBackRefundLogBackRefundId(aftersalesId.value);
  switch (response.__error) {
    case undefined:
      // 把照片排前面
      logs.value = response.data.list.map((log) => {
        const contentInfo = log.content_info.sort((a, b) => {
          if (['申请凭证', '上传凭证'].includes(a.title)) return -1;
          if (['申请凭证', '上传凭证'].includes(b.title)) return 1;
          return 0;
        });
        return { ...log, content_info: contentInfo };
      });
      break;
  }
};

const imagesParse = (json: string) => {
  try {
    return JSON.parse(json) as string[];
  } catch {
    return [];
  }
};
</script>

<style lang="scss" scoped>
.aftersales-block {
  margin: 0 24rpx 24rpx;
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12rpx;
  .header {
    display: flex;
    gap: 8rpx;
    .text-icon {
      height: 60rpx;
      width: 60rpx;
      border-radius: 30rpx;
      font-size: 32rpx;
      font-weight: 300;
      line-height: 60rpx;
      text-align: center;
      color: white;
      &.buyer {
        background-color: #ff2f3b;
      }
      &.merchant {
        background-color: #417cfe;
      }
    }
    .header-content {
      flex: 1;
      min-width: 0;
      .main {
        font-weight: bold;
        margin-bottom: 8rpx;
      }
      .sub {
        font-weight: 300;
        color: #999999;
      }
    }
  }
  .info-item {
    display: flex;
    align-items: flex-start;
    line-height: 36rpx;
    gap: 12rpx;
    .label {
      flex-shrink: 0;
    }
    .content {
      flex: 1;
      min-width: 0;
    }
    .image-list {
      flex: 1;
      min-width: none;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12rpx;
    }
  }
}
</style>
